#head {
    padding: 5%;
}

html {
    font-size: 100%;
}

#about-img {
    width: 30%;
    height: 30%;
}

#body {
    text-align: center;
}

.about {
    top: 50%;
}

#foot {
    margin-top: 10%;
}

#footText {
    font-size: 10%;
}

#head-big {
    -webkit-animation-name: fadeIn;
    /*动画名称*/
    -webkit-animation-duration: 1s;
    /*动画持续时间*/
    -webkit-animation-iteration-count: 1;
    /*动画次数*/
    -webkit-animation-delay: 0s;
    /*延迟时间*/
}

#head-small {
    -webkit-animation-name: fadeIn;
    /*动画名称*/
    -webkit-animation-duration: 1s;
    /*动画持续时间*/
    -webkit-animation-iteration-count: 1;
    /*动画次数*/
    -webkit-animation-delay: 0s;
    /*延迟时间*/
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        /*初始状态 透明度为0*/
    }
    10% {
        opacity: 0.1;
        /*中间状态 透明度为0*/
    }
    20% {
        opacity: 0.2;
        /*中间状态 透明度为0*/
    }
    30% {
        opacity: 0.3;
        /*中间状态 透明度为0*/
    }
    40% {
        opacity: 0.4;
        /*中间状态 透明度为0*/
    }
    50% {
        opacity: 0.5;
        /*中间状态 透明度为0*/
    }
    60% {
        opacity: 0.6;
        /*中间状态 透明度为0*/
    }
    70% {
        opacity: 0.7;
        /*中间状态 透明度为0*/
    }
    80% {
        opacity: 0.8;
        /*中间状态 透明度为0*/
    }
    90% {
        opacity: 0.9;
        /*中间状态 透明度为0*/
    }
    100% {
        opacity: 1;
        /*结尾状态 透明度为1*/
    }
}